<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="content mindWidth">
      <div class="title">高企预评分表</div>
      <div class="form">
        <el-form label-width="120px">
          <el-form-item label="企业名称" :required="true">
            <el-input placeholder="请输入企业名称" style="width:300px" v-model="form.companyName"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" :required="true">
            <el-input placeholder="请输入手机号码" style="width:300px" v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="联系人" :required="true">
            <el-input placeholder="请输入联系人" style="width:300px" v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="企业成立时间">
            <el-date-picker
              v-model="form.companyYearEstablish"
              type="year"
              placeholder="请选择企业成立时间"
              format="yyyy"
              value-format="yyyy"
              style="width:300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="申报认定时间">
            <el-date-picker
              v-model="form.declarationConfirmationYears"
              type="year"
              placeholder="请选择申报认定时间"
              format="yyyy"
              value-format="yyyy"
              style="width:300px"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="lable-title">知识产权</div>
      <div class="form">
        <el-form label-width="120px">
          <el-form-item label="发明专利数量">
            <el-input placeholder style="width:300px" v-model="form.inventPatentQuantity"></el-input>
          </el-form-item>
          <el-form-item label="实用新型数量">
            <el-input placeholder style="width:300px" v-model="form.practicalNewKindQuantity"></el-input>
          </el-form-item>
          <el-form-item label="软件著作权数量">
            <el-input placeholder style="width:300px" v-model="form.softQuantity"></el-input>
          </el-form-item>
          <el-form-item label="制定标准数量">
            <el-input placeholder style="width:300px" v-model="form.formulateStandardQuantity"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="grade flex-end flex">
        小计：
        <span>{{ grade.intellectualPropertyScore || 0 }}</span>
      </div>
      <div class="lable-title">成果转化能力</div>
      <div class="form">
        <el-form label-width="120px">
          <el-form-item label="成果数量">
            <el-input placeholder style="width:300px" v-model="form.achievementQuantity"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="grade flex-end flex">
        小计：
        <span>{{ grade.achievementScore || 0 }}</span>
      </div>
      <div class="lable-title">研发组织管理水平</div>
      <div class="form">
        <el-checkbox
          v-model="form.whetherHaveResearchInstitute"
          true-label="1"
          false-label="0"
        >是否成立研发机构</el-checkbox>
        <el-checkbox
          v-model="form.whetherHaveSpecialAccount"
          true-label="1"
          false-label="0"
        >是否设立研发辅助账/专账</el-checkbox>
        <el-checkbox
          v-model="form.whetherHaveTestingEquipment"
          true-label="1"
          false-label="0"
        >是否有健全的研发检测设备</el-checkbox>
        <el-checkbox v-model="form.whetherHaveCooperation" true-label="1" false-label="0">是否有产学研合作</el-checkbox>
        <el-checkbox v-model="form.whetherHaveReward" true-label="1" false-label="0">是否实行科技创新激励</el-checkbox>
        <el-checkbox
          v-model="form.whetherHavePioneerPlatform"
          true-label="1"
          false-label="0"
        >是否建立开放式创新创业平台</el-checkbox>
        <el-checkbox
          v-model="form.whetherHaveTalentCulture"
          true-label="1"
          false-label="0"
        >是否有健全的人才培养体制</el-checkbox>
      </div>
      <div class="grade flex-end flex">
        小计：
        <span>{{ grade.managementLevelScore || 0 }}</span>
      </div>
      <div class="lable-title">净资产和销售额(万元)</div>
      <div class="form table">
        <div class="cell flex items-middle space-around">
          <div class="tb-title"></div>
          <div class="tb-title">净资产</div>
          <div class="tb-title">销售额</div>
        </div>
        <div class="cell flex items-middle space-around">
          <div class="tb-info">{{ thisYear - 1 }}</div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastThreeYearsNetAssets"></el-input>
          </div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastThreeYearsSales"></el-input>
          </div>
        </div>
        <div class="cell flex items-middle space-around">
          <div class="tb-info">{{ thisYear - 2 }}</div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastTwoYearsNetAssets"></el-input>
          </div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastTwoYearsSales"></el-input>
          </div>
        </div>
        <div class="cell flex items-middle space-around">
          <div class="tb-info">{{ thisYear - 3 }}</div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastYearNetAssets"></el-input>
          </div>
          <div class="tb-info">
            <el-input style="width:300px" v-model="form.lastYearSales"></el-input>
          </div>
        </div>
      </div>
      <div class="grade flex-end flex">
        总资产增长率：
        <span>{{ grade.totalAssetsGrowthScore || 0 }}</span>
      </div>
      <div class="grade flex-end flex">
        销售增长率：
        <span>{{ grade.salesGrowthScore || 0 }}</span>
      </div>
      <div class="pay-btn flex-end flex">
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
      <div class="grade">
        总分：
        <span>{{ grade.totalScore || 0 }}</span>
      </div>
    </div>
    <footer-nav></footer-nav>
    <navigation></navigation>
    <el-dialog :visible="visible" width="500px" @close="close">
      <div class="grade-content flex flex-wrap">
        <div class="dia-lable">
          <span>知识产权：</span>
          {{ grade.intellectualPropertyScore || 0 }}
        </div>
        <div class="dia-lable">
          <span>成果转化能力：</span>
          {{ grade.achievementScore || 0 }}
        </div>
        <div class="dia-lable">
          <span>研发组织管理水平：</span>
          {{ grade.managementLevelScore || 0 }}
        </div>
        <div class="dia-lable">
          <span>总资产增长率：</span>
          {{ grade.totalAssetsGrowthScore || 0 }}
        </div>
        <div class="dia-lable">
          <span>销售增长率：</span>
          {{ grade.salesGrowthScore || 0 }}
        </div>
        <div class="dia-lable">
          <span>总分：</span>
          {{ grade.totalScore || 0 }}
        </div>
      </div>

      <div class="lable">{{lable}}</div>
    </el-dialog>
  </div>
</template>
<script>
import { getHighTechPreEvaluationTool } from "../../api/api.js";
import { isMobile } from "../../util/validate.js";

let d = new Date();
let year = d.getFullYear();
export default {
  data() {
    return {
      visible: false,
      thisYear: year,
      form: {
        companyName: "",
        phoneNumber: "",
        contact: "",
        companyYearEstablish: "",
        declarationConfirmationYears: "",
        inventPatentQuantity: 0, //发明专利
        practicalNewKindQuantity: 0, //实用新型
        softQuantity: 0, //软件著作权
        formulateStandardQuantity: 0, //制定标准
        achievementQuantity: 0, //成果数量

        lastThreeYearsNetAssets: 0, //上三年净资产
        lastTwoYearsNetAssets: 0, //上两年净资产
        lastYearNetAssets: 0, //上一年净资产

        lastThreeYearsSales: 0, //上三年销售额
        lastTwoYearsSales: 0, //上二年销售额
        lastYearSales: 0, //上一年销售额

        whetherHaveCooperation: "0", //是否有产学研合作
        whetherHavePioneerPlatform: "0", //是否建立开放式创新创业平台
        whetherHaveResearchInstitute: "0", //是否成立研发机构
        whetherHaveReward: "0", //是否实行科技创新激励
        whetherHaveSpecialAccount: "0", //是否设立研发辅助账/专账
        whetherHaveTalentCulture: "0", //是否有健全的人才培养体制
        whetherHaveTestingEquipment: "0" //是否有健全的研发检测设备
      },
      lable: "",
      grade: {}
    };
  },
  mounted() {},
  methods: {
    submit() {
      let params = [
        { value: this.form.companyName, text: "请输入公司名称", type: 1 },
        { value: this.form.phoneNumber, text: "请输入正确的手机号码", type: 2 },
        { value: this.form.contact, text: "请输入联系人", type: 1 },
        {
          value: this.form.companyYearEstablish,
          text: "请选择企业成立时间",
          type: 1
        },
        {
          value: this.form.declarationConfirmationYears,
          text: "请选择申报认定时间",
          type: 1
        },
        {
          value: this.form.inventPatentQuantity,
          text: "请输入发明专利数量",
          type: 1
        },
        {
          value: this.form.practicalNewKindQuantity,
          text: "请输入实用新型数量",
          type: 1
        },
        {
          value: this.form.softQuantity,
          text: "请输入软件著作权数量",
          type: 1
        },
        {
          value: this.form.formulateStandardQuantity,
          text: "请输入制定标准数量",
          type: 1
        },
        {
          value: this.form.achievementQuantity,
          text: "请输入成果数量",
          type: 1
        },
        {
          value: this.form.lastThreeYearsNetAssets,
          text: `请输入${this.thisYear - 2}净资产`,
          type: 1
        },
        {
          value: this.form.lastTwoYearsNetAssets,
          text: `请输入${this.thisYear - 1}净资产`,
          type: 1
        },
        {
          value: this.form.lastYearNetAssets,
          text: `请输入${this.thisYear}净资产`,
          type: 1
        },
        {
          value: this.form.lastThreeYearsSales,
          text: `请输入${this.thisYear - 2}销售额`,
          type: 1
        },
        {
          value: this.form.lastTwoYearsSales,
          text: `请输入${this.thisYear - 1}销售额`,
          type: 1
        },
        {
          value: this.form.lastYearSales,
          text: `请输入${this.thisYear}销售额`,
          type: 1
        }
      ];
      for (let i = 0; i < params.length; i++) {
        let obj = params[i];
        if (obj.value === "") {
          this.$message({
            type: "warning",
            message: `${obj.text}`
          });
          return;
        }
        if (obj.type === 2 && !isMobile(obj.value)) {
          this.$message({
            type: "warning",
            message: `${obj.text}`
          });
          return;
        }
      }
      getHighTechPreEvaluationTool(this.form).then(res => {
        if (res.code === 200) {
          this.grade = res.result;
          this.lable = res.message;
          this.visible = true;
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    close() {
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-checkbox {
  margin-bottom: 20px;
}

.container {
  .content {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    box-shadow: 0 0 10px #ccc;
    margin: 40px auto;
    min-height: 550px;

    .title {
      width: 100%;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      padding: 10px 0;
      box-sizing: border-box;
    }

    .lable-title {
      padding: 0 10px;
      box-sizing: border-box;
      border-left: 5px solid #1678ff;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .grade {
      text-align: center;
      padding: 10px 0;

      span {
        color: red;
      }
    }

    .table {
      width: 80%;
      border: 1px solid #ddd;

      .cell {
        padding: 15px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;

        div {
          width: 45%;
          text-align: center;
          // border-right: 1px solid #ddd;
        }
      }

      .cell div:first-child {
        width: 10%;
        text-align: center;
      }

      .cell:last-child {
        border: none;
      }
    }
  }

  .grade-content {
    padding: 10px;
    box-sizing: border-box;
    .lable {
      line-height: 30px;
      color: #444;
      text-indent: 32px;
      margin-top: 15px;
    }

    .dia-lable {
      padding: 10px 0;
      color: red;

      span {
        display: inline-block;
        width: 155px;
        text-align: right;
        color: #bbb;
      }
    }
  }
}
</style>
